<template>
  <div class="order-item">
    <div class="order-product-header">
      <ul>
        <li class="product-header-information">{{$tc('message.detail')}}</li>
        <li class="product-price">{{$t('message.price')}}</li>
        <li class="product-down-payment">{{$tc('message.downPayment', 2)}}</li>
        <li class="product-period-number">{{$t('message.amortizationNum')}}</li>
        <li class="product-period-payment">{{$t('message.monthPay')}}</li>
        <li class="product-this-payment">{{$t('message.nowPay')}}</li>
      </ul>
    </div>
    <div class="order-product-content">
      <!--商品没有下架-->
      <template v-if="!isSoldOut">
        <ul>
          <li class="product-image">
            <div class="product-item">
              <img v-lazy="order.icon1" />
            </div>
          </li>
          <li class="product-information">
            <div class="product-item">
              <p class="product-information-title">{{ order.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ order.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ order.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item">
              {{ order.base_price }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item">
              {{ isShowDown_payment }}
            </div>
          </li>
          <li class="product-period-number">
            <div class="product-item">
              {{ order.stages || '--' }}
            </div>
          </li>
          <li class="product-period-payment">
            <div class="product-item">
              {{ stage_pay }}
            </div>
          </li>
          <li class="product-this-payment">
            <div class="product-item">
              {{ order.down_payment }}
            </div>
          </li>
        </ul>
        <!--赠品-->
        <ul style="border-top:1px solid #e0e0e0" v-for="(item, index) in order.gives">
          <li class="product-image">
            <div class="product-item">
              <img v-lazy="item.icon1" />
            </div>
          </li>
          <li class="product-information">
            <div class="product-item">
              <p class="product-information-title">{{ item.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ item.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ item.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item">
              {{ $t('message.gifts') }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item">--</div>
          </li>
          <li class="product-period-number">
            <div class="product-item">--</div>
          </li>
          <li class="product-period-payment">
            <div class="product-item">--</div>
          </li>
          <li class="product-this-payment-gifts">
            <div class="product-item">0</div>
          </li>
        </ul>
      </template>
      <!--商品下架-->
      <template v-if="isSoldOut">
        <ul>
          <li class="product-image">
            <div class="product-item sold-out">
              <img v-lazy="order.icon1" />
            </div>
            <div class="img-shade">{{ $t('message.alreadySoldOut') }}</div>
          </li>
          <li class="product-information">
            <div class="product-item sold-out">
              <p class="product-information-title">{{ order.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ order.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ order.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item sold-out">
              {{ order.base_price }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item sold-out">
              {{ isShowDown_payment }}
            </div>
          </li>
          <li class="product-period-number">
            <div class="product-item sold-out">
              {{ order.stages || '--' }}
            </div>
          </li>
          <li class="product-period-payment">
            <div class="product-item sold-out">
              {{ stage_pay }}
            </div>
          </li>
          <li class="product-this-payment">
            <div class="product-item sold-out">
              {{ order.down_payment }}
            </div>
          </li>
        </ul>
        <!--赠品-->
        <ul style="border-top:1px solid #e0e0e0" v-for="(item, index) in order.gives">
          <li class="product-image">
            <div class="product-item sold-out">
              <img v-lazy="item.icon1" />
            </div>
            <div class="img-shade">{{ $t('message.alreadySoldOut') }}</div>
          </li>
          <li class="product-information">
            <div class="product-item sold-out">
              <p class="product-information-title">{{ item.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ item.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ item.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item sold-out">
              {{ $t('message.gifts') }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item sold-out">--</div>
          </li>
          <li class="product-period-number">
            <div class="product-item sold-out">--</div>
          </li>
          <li class="product-period-payment">
            <div class="product-item sold-out">--</div>
          </li>
          <li class="product-this-payment-gifts">
            <div class="product-item sold-out">0</div>
          </li>
        </ul>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'VOrderItem',
    props: {
      order: {
        type: Object,
        default () {
          return {
            imageSrc: null,
            title: '--',
            label1: '--',
            label2: '--',
            price: '--',
            downPayment: '--',
            periodNumber: '--',
            periodPayment: '--',
            thisPayment: '--'
          }
        }
      },
      isSoldOut: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      isShowDown_payment () {
        if (this.$route.query.buyType === 'full') {
          return '--'
        } else {
          if (this.order.is_full_amount === 1) {
            this.order.stage_pay = '--'
            return '--'
          }
          return this.order.down_payment
        }
      },
      stage_pay () {
        if (this.$route.query.buyType === 'full') {
          return '--'
        } else {
          if (this.order.stage_pay) {
            return this.order.stage_pay
          } else {
            return '--'
          }
        }
      }
    }
  }
</script>

<style scoped>
  /*  .product-item {
      color: red!important;
    }*/
  .sold-out, .sold-out p {
    color: #A5A5A5!important;
  }
  .order-item .order-product-header {
    height: 58px;
    border: 1px solid #e0e0e0;
    background-color: #f7f7f7;
  }

  .order-item .order-product-header ul {
    overflow: hidden;
  }

  .order-item .order-product-header li {
    float: left;
    font-size: 14px;
    color: #333;
    line-height: 58px;
  }

  .order-product-header .product-header-information {
    width: 328px;
    padding-left: 23px;
  }

  .order-item .product-price {
    width: 128px;
    text-align: center;
  }

  .order-item .product-down-payment {
    width: 142px;
    text-align: center;
  }

  .order-item .product-period-number {
    width: 142px;
    text-align: center;
  }

  .order-item .product-period-payment {
    width: 156px;
    text-align: center;
  }

  .order-item .product-this-payment {
    width: 199px;
    text-align: center;
  }


  .order-item .product-this-payment-gifts {
    width: 199px;
    text-align: center;
  }

  .order-item .order-product-content {
    border: 1px solid #e0e0e0;
    border-top: 0;
  }

  .order-product-content ul {
    overflow: hidden;
  }

  .order-product-content li {
    float: left;
    height: 147px;
    display: table;
  }

  .order-product-content .product-item {
    display: table-cell;
    vertical-align: middle;
    height: 20px;
    line-height: 20px;
    color: #333;
  }

  .order-product-content .product-image {
    padding: 0 24px 0 23px;
    position: relative;
  }

  .order-product-content .product-image > div {
    width: 100px;
    height: 100px;
  }
  .order-product-content .product-image .img-shade {
    position: absolute;
    left: 23px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.6);
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 100px;
  }

  .order-product-content .product-image img {
    width: 100%;
    height: 100%;
  }

  .order-product-content .product-information {
    width: 204px;
  }

  .order-product-content .product-information p {
    width: 180px;
  }

  .product-information .product-information-title {
    line-height: 20px;
    font-size: 14px;
    color: #333;
  }

  .product-information .product-information-label1 {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    color: #666;
    margin-top: 8px;
  }

  .product-information .product-information-label2 {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }

  .order-product-content .product-this-payment > div {
    color: #ff600a;
  }

  .order-product-content .product-this-payment-gifts > div {
    color: #000;
  }
</style>
